<template>
  <div class="hea">
	  <div class="logo">dypf</div>
	  <div class="search">
		<input class="search-input" id="search-input" type="text" placeholder="输入要查询的书籍">
		<div class="search-button" @click="searchBook">搜索</div>
	  </div>
	  <div class="user">
		<router-link to="/registerphone">
			<input class="zc_dl" type="button" value="注册">
		</router-link>
		<span>|</span>
		<router-link to="/login">
			<input class="zc_dl" type="button" value="登录">
		</router-link>
	  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default{
	name:'Header',
	data(){
		return{
			
		}
	},
	methods:{
		searchBook(){
			var searchInput = document.getElementById('search-input').value.trim();
			// console.log(searchInput)
			axios.post(('http://localhost:3000/api/user/searchBookInfo'),{
				title:searchInput
			},{}).then((response)=>{
				var title = []
				// console.log(response.data[0].b_id)
				for(var i = 0; i < response.data.length; i++){
					title.push(response.data[i])
				}
				// console.log(title.length)
				for(var j = 0; j < title.length; j++){
					if(searchInput == title[j].b_title){
						// console.log(title[j].b_id)
						// console.log(searchInput)
						var id = title[j].b_id;
						var title = title[j].b_title
						// console.log(id)
						// console.log(title)
						axios.post(('http://localhost:3000/api/user/chapter'),{
							id:id,
							title:title
						},{}).then((response)=>{
							this.$router.push({path:'/chapter',query:{id:id,title:title}})
						})
						return false
					}
				}
				alert('sorry,暂时未收录该书')
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
	input{
	  background :#FFFFFF;
	}
  .hea{
	  width:100%;
	  height:40px;
	  padding:5px 0;
  }
  .logo{
	width:100px;
	float:left;
	height:30px;
	line-height :30px;
	font-size :20px;
	font-weight :500;
	text-align :center;
	padding-top:3px;
	color :#fb9a61e0;
  }
  .search{
	width:400px;
	float:left;
	height:30px;
	padding-left:350px;
	padding-top:3px;
  }
  .search-input{
	width:400px;
	height:30px;
	background:#ced4e2;
	border-radius:10px;
	padding-left: 30px;
  }
  .search-button{
	position:absolute;
	top:8px;
	left :820px;
	width :50px;
	height :30px;
	line-height :30px;
	font-size :16px;
	padding-left :10px;
	border-top-right-radius :10px;
	border-bottom-right-radius :10px;
	background #a2b0b5;
  }
  .search-button:hover{
	cursor :pointer;
  }
  .user{
	width:15%;
	float:right;
  }
  .user>input{
	width:1rem;
  }
  .zc_dl{
	  // background :#cacaca6b;
	  width 50px;
	  text-align :center;
	  border-radius :10%;
  }
  .zc_dl:hover{
	cursor :pointer;
	background :#A9A9A9;
  }
</style>
